<template>
  <div>
    <!-- 标签页 -->
    <el-tabs v-model="activeTab">
      <!-- 首页标签页 -->
      <el-tab-pane label="百度翻译" name="home">
        <!-- 注意：这里的 URL 应该替换为百度翻译的实际 URL -->
        <iframe
          :src="baiduTranslateUrl"
          width="100%"
          height="600"
          frameborder="0"
          allowfullscreen
        ></iframe>
      </el-tab-pane>
      <!-- Google 翻译标签页 -->
      <el-tab-pane label="Google 翻译" name="biying">
        <!-- 注意：这里的 URL 应该替换为 Google 翻译的实际 URL -->
        <iframe
          :src="googleTranslateUrl"
          width="100%"
          height="600"
          frameborder="0"
          allowfullscreen
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="小牛 翻译" name="小牛">
        <!-- 注意：这里的 URL 应该替换为 Google 翻译的实际 URL -->
        <iframe
          :src="xiaoniuTranslateUrl"
          width="100%"
          height="600"
          frameborder="0"
          allowfullscreen
        ></iframe>
      </el-tab-pane>
      <!-- 其他标签页 -->
      <!-- <el-tab-pane label="标签页名称" name="other-tab">...</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义当前激活的标签页名称
      activeTab: 'home',
      // 定义百度翻译的 URL
      baiduTranslateUrl: 'https://fanyi.baidu.com',
      // 定义 Google 翻译的 URL
      googleTranslateUrl: 'https://translate.google.com',
      xiaoniuTranslateUrl: 'https://niutrans.com/trans?type=text'
    };
  },
};
</script>